<template>
	<view class="tui-addr-box">
		<form :report-submit="true">
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">收货人</view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.recipient" placeholder="请输入收货人姓名" maxlength="15" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">手机号码</view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.mobile" placeholder="请输入收货人手机号码" maxlength="11"
					 type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :arrow="true" padding="0">
				<view class="tui-line-cell" @click="showPicker" >
					<view class="tui-title"><text class="tui-title-city-text">所在城市</text></view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.province + info.city + info.district" disabled name="city" placeholder="请选择城市" maxlength="50" type="text" @click="showPicker" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">收货地址</view>
					<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.address" placeholder="请输入详细的收货地址" maxlength="50" type="text" />
					
				</view>
			</tui-list-cell>
<!-- 			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-cell-title">地址类型</view>
					<view class="tui-addr-label">
						<text v-for="(item,index) in lists" :key="index" class="tui-label-item" :class="{'tui-label-active':index==1}">{{item}}</text>
					</view>
				</view>
			</tui-list-cell> -->
		    <view class="v-modal" v-show="selected" @click="selected=false"></view>
			<!-- 默认地址 -->
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-swipe-cell">
					<view>设为默认地址</view>
					<switch @change="switch2Change" color="#19be6b" class="tui-switch-small" v-if="is_default" checked />
					<switch @change="switch2Change" color="#19be6b" class="tui-switch-small" v-if="!is_default" />
				</view>
			</tui-list-cell>
			<!-- 保存地址 -->
			<view class="tui-addr-save">
				<tui-button shadow type="orange" height="88rpx" shape="circle" @click="saveAddress">保存收货地址</tui-button>
			</view>
			<view class="tui-del" v-if="adressid">
				<tui-button shadow type="gray" height="88rpx" shape="circle" @click="delAddress">删除收货地址</tui-button>
			</view>
		</form>
		<!-- 省市区 -->
				
				
				<!--picker-view start-->
				<view class="tui-mask-screen" :class="[showPickerStatus?'tui-mask-show':'']" @tap="hidePicker"></view>
				<view class="tui-picker-box" :class="[showPickerStatus?'tui-pickerbox-show':'']">
					<view class="picker-header tui-list-item">
						<view class="btn-cancle" hover-class="tui-opcity" :hover-stay-time="150" @tap.stop="hidePicker">取消</view>
						<view class="btn-sure" hover-class="tui-opcity" :hover-stay-time="150" @tap.stop="picker">确定</view>
					</view>
					<picker-view indicator-style="height: 50px;" class="picker-view" :value="value" @change="columnPicker">
						<picker-view-column>
							<view v-for="(item,index) in provinceData" :key="index" class="item">{{item.province_name}}</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="(item,index) in cityData" :key="index" class="item">{{item.city_name}}</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="(item,index) in districtData" :key="index" class="item">{{item.district_name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<!--picker-view end-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: ["公司", "家", "学校", "其他"],
				adressid: '',
				title: "",
				defaultArea: "",
				is_default: 0,
				selected: false,
				value: [0, 0, 0],
				showPickerStatus: false,
		        curProvince: {
			         name: '浙江省',
			         id: '11',
			        // 34
		        },
				curCity: {
					name: '',
					id: ''
				},
				curDistrict: {
					name: '',
					id: ''
				},
	           
				info: {
					addressee: "",
					mobile: "",
					phone: "",
					province: "",
					city: "",
					district: "",
					address: "",
					zip_code: "",
					idcard:'',
				}, //  地址																													
	
				provinceData: [
					
				],
				cityData: [],
				districtData: [],
				provinceindex:"",
				cityindex:"",
				districtindex:"",
			}
		},
		onLoad: function(options) {
	         this.tui.haslogin();
	         if(this.tui.isLogin()){
				 if (options.adressid) {
				 	uni.setNavigationBarTitle({
				 		title: "编辑地址"
				 	})
					this.adressid=options.adressid
				 	let ids = options.adressid;
				 	this.loadAddressInfo(ids);
				 } else {			
				 	this.is_default = 0;
				 	uni.setNavigationBarTitle({
				 			title: "添加地址"
				 	})
					this.resetAddressPro();
				 }
	         }
		},
		methods: {
			// 读取修改地址信息
			loadAddressInfo(ids) {
				let token = this.tui.getToken();
				let datas={
					token: token,
					address_id:this.adressid
				};
				let address=this.tui.request('user','post',datas,1000,1,'','address');
				
				Promise.resolve(address).then((value)=>{
				   if(value.code==200){
				     	this.curProvince.name = value.data.province_name;
				     	this.curCity.name = value.data.city_name;
				     	this.curDistrict.name = value.data.district_name;
				     	this.info.address = value.data.address;							
				     	this.info.recipient = value.data.recipient;
				     	this.info.mobile = value.data.mobile;
				     	this.is_default = value.data.is_default==1 ? 1 :0;						
				     	// this.resetAddressPro();
				     	this.info.province = this.curProvince.name;
				     	this.info.city = this.curCity.name;
				     	this.info.district = this.curDistrict.name;	
						this.curProvince.id=value.data.province_id
						this.curCity.id=value.data.city_id;
						this.curDistrict.id=value.data.district_id;
				   }else{
				     	this.tui.toast(value.message);
				   }
				})
			
			},
			//picker change切换事件
			columnPicker: function(e) {
	
	            this.curDistrict.name='';
				this.curCity.name='';
				let value = e.detail.value;
				
				//如果两者下标不一致，表示滚动过
				if (this.value[0] !== value[0]) {
					
					this.provinceData = this.provinceData;
					this.resetAddressCity(this.provinceData[value[0]]['province_id']);
	                this.resetAddressDistrict(this.cityData[value[1]]['city_id']);
					
				    this.value = [value[0],0, 0]
				} else if (this.value[1] !== value[1]) {
					this.provinceData = this.provinceData;
					this.cityData = this.cityData;
				    this.resetAddressDistrict(this.cityData[value[1]]['city_id']);
					this.value = [value[0], value[1], 0]
				} else {
					this.value = value
				
			
				}
			},
			//确定按钮
			picker: function(e) {
				let value = this.value;
				this.info.province = this.provinceData[value[0]].province_name;
				this.info.city = this.cityData[value[1]].city_name;
				this.info.district =this.districtData[value[2]].district_name;
				
				this.curProvince.id=this.provinceData[value[0]].province_id;
				this.curCity.id=this.cityData[value[1]].city_id;
				this.curDistrict.id=this.districtData[value[2]].district_id;
			 	this.showPickerStatus = false
			},
			// 显示picker-view
			showPicker: function() {
				this.resetAddressPro();
				this.showPickerStatus = true
				
			},
			// 隐藏picker-view
			hidePicker: function() {
				this.showPickerStatus = false
			},
			// 获取省
			resetAddressPro() {			
				let token = this.tui.getToken();
				let datas={
					token: token,
				};
				let address=this.tui.request('user','post',datas,1000,1,'','provinces');
				Promise.resolve(address).then((value)=>{
				   if(value.code==200){
					   
				     	this.provinceData = value.data;
				     		this.provinceData.forEach((item,index) => {
				     			if (this.curProvince.name == item.province_name) {
				     				this.curProvince.id = item.province_id;
									this.value=[index,0,0];
									this.provinceindex=index;
				     			}
				     		})
							
				     		this.resetAddressCity(this.curProvince.id);
				   }
				})
			},
			// 获取市
			resetAddressCity(id) {	
				let token = this.tui.getToken();
				let datas={
					token: token,
					province_id: id
				};
				let curCityId='';
				let address=this.tui.request('user','post',datas,1000,1,'','provinces');
				Promise.resolve(address).then((value)=>{
				   if(value.code==200){
				     	this.cityData = value.data;	
							if(this.curCity.name){
								this.cityData.forEach((item,index) => {
									if (this.curCity.name == item.city_name) {
										this.value[1]=index;
										this.cityindex=index
									}
								});
							}else{
								this.cityData.forEach((item,index) => {
									this.curCity.id=this.cityData[0].city_id;
								});
							}
				     		this.resetAddressDistrict(this.curCity.id)
				     				
				   }
				})
			},
			// 获取区
			resetAddressDistrict(id) {
				let token = this.tui.getToken();
				let datas={
					token: token,
					city_id: id
				};
				console.log(id)
				let address=this.tui.request('user','post',datas,1000,1,'','provinces');
				Promise.resolve(address).then((value)=>{
				   if(value.code==200){
				     	this.districtData = value.data;
				     		this.districtData.forEach((item,index) => {
				     			if (this.curDistrict.name == item.district_name) {
				     				this.curDistrict.id = item.district_id;  
									this.value=[this.provinceindex,this.cityindex,index];
				     			}else{
								    this.curDistrict.id = item.district_id;  
								}
				     		});			
				   }
				})
			},
			// 提交
			saveAddress() {
				let token = this.tui.getToken();
				let defaults=this.is_default==0?'0':1;
	
				let datas={
					token: token,
					province_id: this.curProvince.id,
					city_id: this.curCity.id,
					district_id: this.curDistrict.id,
					address: this.info.address, // 街道地址
					recipient: this.info.recipient, // 收货人名称
					mobile: this.info.mobile, // 收货手机号
					
					is_default: defaults,
				};
				if (this.adressid) {
	                datas.address_id = this.adressid;
					let address=this.tui.request('user','post',datas,1000,1,'','modifyAddress');
					// 修改收货地址
					Promise.resolve(address).then((value)=>{
					   if(value.code==200){
					   	this.tui.toast(value.message);
					   	setTimeout(()=>{						
							let pages = getCurrentPages();
							let currPage = pages[pages.length - 1]; //当前页面
							let prevPage = pages[pages.length - 2]; //上一个页面
							
							prevPage.setData({
							  isDoRefresh:true
							})					   		
							//#ifdef MP-WEIXIN
							  prevPage.onLoad()
							//#endif
					   		uni.navigateBack();
					   	},1000)
					   }else{
					   	this.tui.toast(value.message);
					   }
					})
			
				} else {
					// 新增收货地址
					let address=this.tui.request('user','post',datas,1000,1,'','addAddress');
					// 修改收货地址
					Promise.resolve(address).then((value)=>{
						if(value.code==200){
							this.tui.toast(value.message);
							setTimeout(()=>{
								let pages = getCurrentPages();
								let currPage = pages[pages.length - 1]; //当前页面
								let prevPage = pages[pages.length - 2]; //上一个页面
								prevPage.setData({
								  isDoRefresh:true
								})
								//#ifdef MP-WEIXIN
								  prevPage.onLoad()
								//#endif
								uni.navigateBack();
							},1000)
						}else{
							this.tui.toast(value.message);
						}
						
					})
				}
			},
			delAddress(){
				let token = this.tui.getToken();	
				let datas={
					token: token,
					address_id: this.adressid,
				};
					let address=this.tui.request('user','post',datas,1000,1,'','delAddress');
					Promise.resolve(address).then((value)=>{
					   if(value.code==200){
					   	this.tui.toast(value.message);
					   	setTimeout(()=>{
					   		let pages = getCurrentPages();
					   		let currPage = pages[pages.length - 1]; //当前页面
					   		let prevPage = pages[pages.length - 2]; //上一个页面
					   
					   		prevPage.setData({
					   		  isDoRefresh:true
					   		})
							//#ifdef MP-WEIXIN
							  prevPage.onLoad()
							//#endif
					   		uni.navigateBack();
					   	},1000)
					   }else{
					   	this.tui.toast(value.message);
					   }
					})
							
			},
			switch2Change: function(e) {
				if (e.target.value) {
					this.is_default = 1;
				} else {
					this.is_default = 0;
				}
			},
		}
	}
</script>

<style>
	   /* picker start*/
	   
	   .tui-mask-screen {
	   	position: fixed;
	   	top: 0;
	   	left: 0;
	   	right: 0;
	   	bottom: 0;
	   	background: rgba(0, 0, 0, 0.6);
	   	z-index: 99996;
	   	transition: all 0.3s ease-in-out;
	   	opacity: 0;
	   	visibility: hidden;
	   }
	   
	   .tui-mask-show {
	   	opacity: 1;
	   	visibility: visible;
	   }
	   
	   .tui-picker-box {
	   	width: 100%;
	   	position: fixed;
	   	left: 0;
	   	right: 0;
	   	bottom: 0;
	   	z-index: 99999;
	   	visibility: hidden;
	   	transform: translate3d(0, 100%, 0);
	   	transform-origin: center;
	   	transition: all 0.3s ease-in-out;
	   	min-height: 20rpx;
	   	background: #fff;
	   }
	   
	   .tui-pickerbox-show {
	   	transform: translate3d(0, 0, 0);
	   	visibility: visible;
	   }
	   
	   .picker-header {
	   	width: 100%;
	   	height: 90rpx;
	   	padding: 0 46rpx;
	   	display: flex;
	   	justify-content: space-between;
	   	align-items: center;
	   	box-sizing: border-box;
	   	font-size: 32rpx;
	   	background: #fff;
	   }
	   
	   .tui-list-item::after {
	   	left: 0;
	   }
	   
	   .btn-cancle {
	   	padding: 20rpx;
	   	color: #888;
	   }
	   
	   .btn-sure {
	   	padding: 20rpx;
	   	color: #5677fc;
	   }
	   
	   .picker-view {
	   	width: 100%;
	   	height: 260px;
	   }
	   .item {
	   	text-align: center;
	   }
	   .picker-item{text-align:center}
	.detailAddress{
		transform:rotate(180deg);
		display: inline-block;
		float:right;
	}
	
	.v-modal {
		// transition: opacity 2s;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.5;
		background: #000;
		z-index: 1000;
	}
	.tui-addr-box {
		padding: 20rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.tui-input {
		width: 500rpx;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}
	.tui-cell-title{
		font-size: 28rpx;
	}
	.tui-addr-label {
		margin-left: 70rpx;
	}

	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}
	.tui-label-active{
		background: #E41F19;
		border-color:#E41F19;
		color: #fff;
	}
	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}

	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	/* #ifndef H5 */
	.tui-switch-small .wx-switch-input {
		margin: 0 !important;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}

	/* #endif */

	.tui-addr-save {
		padding: 24rpx;
		margin-top: 100rpx;
	}

	.tui-del {
		padding: 24rpx;
	}
</style>
